<template>
  <div class="client-container">
    <!-- 操作按钮区 -->
    <div class="operation-wrapper">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <el-button>批量操作</el-button>
      <el-upload
          action="/api/foundation/carriers/importExcel"
          name="file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
        <el-button>导入</el-button>
      </el-upload>
      <el-button @click="exprotExcel()">导出</el-button>
    </div>



    <!-- 搜索区域 -->
    <div class="search-wrapper">
      <el-form :inline="true" :model="searchForm">
        <!--        <el-form-item label="客户级别">-->
        <!--          <el-select v-model="searchForm.level" placeholder="请选择" clearable style="width: 120px">-->
        <!--            <el-option label="SVIP超级会员" value="1"></el-option>-->
        <!--            <el-option label="VIP会员" value="2"></el-option>-->
        <!--            <el-option label="普通用户" value="3"></el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="请选择时间">-->
        <!--          <el-date-picker-->
        <!--              type="date"-->
        <!--              value-format="yyyy-MM-dd"-->
        <!--              placeholder="选择日期"-->
        <!--              v-model="searchForm.start"></el-date-picker>-->
        <!--          <el-date-picker-->
        <!--              type="date"-->
        <!--              placeholder="选择日期"-->
        <!--              value-format="yyyy-MM-dd"-->
        <!--              v-model="searchForm.end"></el-date-picker>-->
        <!--        </el-form-item>-->
        <el-form-item>
          <el-input
              v-model="searchForm.name"
              placeholder="请输入关键词搜索"
              style="width: 200px"
              clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="table-wrapper">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="id"
            label="id">
        </el-table-column>
        <el-table-column
            prop="name"
            label="名称">
        </el-table-column>
        <el-table-column
            prop="encode"
            label="编码">
        </el-table-column>

        <el-table-column
            prop="driverCount"
            label="司机数量">
        </el-table-column>

        <el-table-column
            prop="cartCount"
            label="车辆数量">
        </el-table-column>

        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>


        <el-table-column
            prop="contract"
            label="是否愿意签合同">
          <template slot-scope="scope">
            {{scope.row.contract==1?'同意':'否决'}}
          </template>
        </el-table-column>

        <el-table-column
            prop="state"
            label="状态">
          <template slot-scope="scope">
            {{scope.row.state==1?'是':'否'}}
          </template>
        </el-table-column>



        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)"  type="text" size="small">查看</el-button>
            <el-button @click="Delete(scope.row.id)"  type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-wrapper">
        <span class="total-text">共 {{ total }} 条</span>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageParams.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageParams.pageSize"
            layout="prev, pager, next, sizes"
            :total="total">
        </el-pagination>
        <div class="goto-page">
          <span>到第</span>
          <el-input v-model="pageParams.pageNum" style="width: 50px; margin: 0 5px;"></el-input>
          <span>页</span>
          <el-button type="primary" size="small" style="margin-left: 10px">确定</el-button>
        </div>
      </div>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="600px"
        :close-on-click-modal="false"
        :destroy-on-close="true">
      <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px" class="dialog-form">
        <el-form-item label="客户名称" prop="clientName">
          <el-input v-model="formData.clientName" placeholder="请输入客户名称"></el-input>
        </el-form-item>
        <el-form-item label="所属行业" prop="industry">
          <el-select v-model="formData.industry" placeholder="请选择行业" style="width: 100%">
            <el-option label="食品/速食食品" value="食品/速食食品"></el-option>
            <el-option label="服装/纺织" value="服装/纺织"></el-option>
            <el-option label="电子产品" value="电子产品"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="formData.contact" placeholder="请输入联系人姓名"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio label="启用">启用</el-radio>
            <el-radio label="禁用">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注信息" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'ClientManagement',
  data() {
    return {
      // 搜索表单
      searchForm: {},
      urlarr:'/api/foundation/carriers',
      // 表格数据
      tableData: [],
      current:1,
      size:2,
      loading: false,
      submitLoading: false,
      // 分页参数
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      // 选中的行
      selectedRows: [],
      // 对话框相关
      dialogVisible: false,
      dialogTitle: '新增客户',
      formData: {
        clientName: '',
        industry: '',
        contact: '',
        phone: '',
        status: '启用',
        remark: ''
      },
      // 表单验证规则
      rules: {
        clientName: [
          { required: true, message: '请输入客户名称', trigger: 'blur' }
        ],
        industry: [
          { required: true, message: '请选择所属行业', trigger: 'change' }
        ],
        contact: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    // 获取表格数据
    getTableData() {
      axios.post(this.urlarr+`/findcarriers?current=${this.current}&size=${this.size}`,this.searchForm).then(res=>{
        this.tableData=res.data.records
        this.total=res.data.total
      })

    },
    // 搜索
    handleSearch() {
      this.pageParams.pageNum = 1
      this.getTableData()
    },
    // 重置搜索
    resetSearch() {
      this.searchForm = {
      }
      this.handleSearch()
    },
    // 表格多选
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    // 新增
    handleAdd() {
      this.dialogTitle = '新增客户'
      this.formData = {
        clientName: '',
        industry: '',
        contact: '',
        phone: '',
        status: '启用',
        remark: ''
      }
      this.dialogVisible = true
    },
    // 编辑
    handleEdit(row) {
      this.dialogTitle = '编辑客户'
      this.formData = { ...row }
      this.dialogVisible = true
    },
    // 地址管理
    handleAddress(row) {
      this.$message.info('打开地址管理')
    },
    // 删除
    Delete(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        axios.post(this.urlarr+`/delete?id=${id}`).then(res=>{
          if (res.data){
            this.getTableData()
            //提示消息
            this.$message.success("删除成功");
          }else {
            //提示消息
            this.$message.success("删除失败");
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 提交表单
    handleSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.submitLoading = true
          setTimeout(() => {
            this.$message.success(this.dialogTitle + '成功')
            this.dialogVisible = false
            this.submitLoading = false
            this.getTableData()
          }, 500)
        }
      })
    },
    // 分页相关方法
    handleSizeChange(val) {
      this.pageParams.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.pageParams.pageNum = val
      this.getTableData()
    },
    //   导出
    exprotExcel(){
      location.href=this.urlarr+"/exprotExcel2"
    },
// 导入
    handleAvatarSuccess(res, file) {
      this.getTableData();
    },
    beforeAvatarUpload(file) {
      return true;
    },


  }
}
</script>

<style scoped>
.client-container {
  padding: 20px;
  background-color: #f0f2f5;
}

.operation-wrapper {
  margin-bottom: 16px;
}

.operation-wrapper .el-button {
  margin-right: 8px;
}

.search-wrapper {
  background-color: #fff;
  padding: 24px 24px 0;
  margin-bottom: 16px;
  border-radius: 2px;
}

.table-wrapper {
  background-color: #fff;
  padding: 24px;
  border-radius: 2px;
}

.pagination-wrapper {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-text {
  color: #606266;
  font-size: 14px;
}

.goto-page {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 14px;
}

/* 覆盖 element-ui 的一些默认样式 */
:deep(.el-table) {
  margin-top: 16px;
}

:deep(.el-table th) {
  background-color: #fafafa;
  color: #606266;
}

:deep(.el-button--text) {
  padding: 0 8px;
}

:deep(.el-form-item) {
  margin-bottom: 24px;
}

:deep(.el-pagination) {
  padding: 0;
}
</style> 